<template>
  <div style="height: 100%">
    <!-- 如果nowInGroup为空的话 空状态 -->
    <el-empty v-if="nowInGroup == null" description="暂无数据"></el-empty>
    <div v-else style="height: 100%">
      <!-- 群聊简介 -->
      <div class="groupHeader">{{ nowInGroup.groupName }}</div>
      <img
        style="width: 30px; height: 30px; float: right; margin-top: -40px"
        @click="delailHouse = true"
        :src="$imageUrl + 2807"
      />
      <el-dialog :visible.sync="delailHouse" width="40%" append-to-body>
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="首页" name="first">
              <div>
                <GrounpIndex :GroupList="GroupList"></GrounpIndex>
              </div>
            </el-tab-pane>
            <el-tab-pane label="成员" name="second" >
              <div>
                <joinGroup
                  :groupName="nowInGroup.groupName"
                  @updateList="updateList"
                  :groupId="nowInGroup.groupId"
                  :joinlist="joinlist"
                ></joinGroup>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-dialog>
      <!-- 群成员的弹窗 -->
      <el-dialog :visible.sync="cheks" width="40%">
        <linGroup
          @close="close"
          :groupId="nowInGroup.groupId"
          :fromId="this.fromId"
          :member="onePer"
          :groupName="nowInGroup.groupName"
        ></linGroup>
      </el-dialog>
      <ul class="msgList" id="list" ref="list">
        <div v-show="loading" style="text-align: center">加载中。。</div>
        <!--   fromType==0 用户类型为系统用户 -->
        <li
          v-for="(message, i) in msgList"
          :key="i"
          :class="[
            message.fromId == userId && message.fromType == 0
              ? 'msg-right'
              : 'msg-left',
          ]"
        >
          <!-- 时间 -->
          <p
            class="msgTime"
            v-show="
              i == 0 ||
              btwnSeconds(msgList[i - 1].createTime, msgList[i].createTime) >
                300
            "
          >
            {{
              btwnDays(message.createTime, getNowTime()) == 0
                ? message.createTime.substr(11, 5)
                : message.createTime.substr(0, 16)
            }}
          </p>
          <div
            v-if="message.isWithdraw"
            class="recalls"
            style="
              float: none;
              text-align: center;
              margin-top: 10px;
              color: gray;
              font-size: 24rpx;
            "
          >
            {{
              message.withdrawUserId == 1 ? "管理员" : message.fromName
            }}撤回了一条消息
          </div>
          <!-- 发送者头像 -->
          <el-image
            v-if="!message.isWithdraw"
            style="
              vertical-align: middle;
              width: 50px;
              height: 50px;
              display: inline-block;
              border-radius: 50%;
            "
            :src="$imageUrl + message.fromImgId"
            @click="ckues(message.fromId)"
          ></el-image>
          <div class="message">
            <!-- 发送者用户名 -->
            <div class="fromName" v-if="!message.isWithdraw">
              {{ message.fromName }}
            </div>
            <!-- 发送的类型 文字 -->
            <div
              class="msg-text"
              v-if="message.msgType == 'text' && !message.isWithdraw"
              @contextmenu.prevent="onContextmenu(event, message)"
            >
              {{ message.content }}
            </div>

            <!-- 发送的类型图片 -->

            <div
              v-if="message.msgType == 'image' && !message.isWithdraw"
              @contextmenu.prevent="onContextmenu(event, message)"
            >
              <el-image
                @click="showImagePreview(message.content)"
                fit="cover"
                class="msg-img"
                :src="message.content"
              ></el-image>
            </div>
            <!-- 转发文章 其他类型 -->
            <div class="msg-text" v-if="message.msgType == 'other'">
              <div class="host" style="width: 350rpx">
                <div class="host_body">
                  <!-- 推文图片 -->
                  <div v-if="message.contents.images">
                    <img
                      style="width: 170px; height: 180px"
                      mode="widthFix"
                      :src="$imageUrl + message.contents.images.split(',')[0]"
                    />
                  </div>
                  <!-- 推文视频 -->
                  <div v-if="message.contents.video">
                    <video
                      style="width: 345rpx"
                      mode="widthFix"
                      :src="
                        'http://101.43.223.224:8765/image/playVideoById?id=' +
                        message.contents.video.split(',')[0]
                      "
                    ></video>
                  </div>
                  <div>
                    <div>{{ message.contents.articleTitle }}</div>
                    <el-row class="ty">
                      <el-col :span="6" class="yui">
                        <img
                          style="border-radius: 20px"
                          width="40px"
                          height="40px"
                          :src="$imageUrl + message.contents.imageId"
                        />
                      </el-col>
                      <el-col :span="10" class="yui">
                        <p class="yui">{{ message.contents.doctorName }}</p>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 发送名片 -->
            <div
              class="cardming"
              v-if="message.msgType == 'link' && !message.isWithdraw"
              @contextmenu.prevent="onContextmenu(event, message)"
            >
              <div class="mingbox">
                <div class="imageleft">
                  <el-image
                    @click="showImagePreview(message.contents)"
                    fit="cover"
                    class="msg-img"
                    :src="$imageUrl + message.contents.imageId"
                  ></el-image>
                </div>
                <div class="textright">
                  <span>{{ message.contents.userName }}</span>
                </div>
              </div>
              <p style="font-size: 15px; margin-top: 4px; text-indent: 1em">
                个人名片
              </p>
            </div>
          </div>
        </li>
      </ul>
      <!-- 聊天输入框 -->
      <div class="text" v-resize="resetTableHeight">
        <!-- 可选 -->
        <!-- 发送图片 -->
        <el-upload
          class="upload-demo upload"
          ref="upload"
          action="'getImageById?id='+imageUrl"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus sendImg"></i>
        </el-upload>
        <div class="imgshow" v-if="imageUrl">
          <img :src="imageUrl" width="148" height="148" class="imgSty" />
          <!-- 发送到服务器 -->
          <el-button
            style="margin-left: 10px; vertical-align: top"
            size="small"
            type="success"
            @click="submitUpload"
            >上传
          </el-button>
        </div>

        <div
          ref="textarea"
          id="textarea"
          contenteditable="true"
          class="sendMsg textarea"
          @paste="optimizePasteEvent"
          @blur="addDefaultContent"
          @input="changeAnswerContent"
        ></div>
        <div id="send-answer" class="send" @click.stop="sendAnswer">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import GrounpIndex from "@/components/GrounpIndex.vue";
import joinGroup from "@/components/joinGroup.vue";
import linGroup from "@/components/linGroup.vue";
import resize from "../util/myresize";
import dateUtil from "../util/date";
import { v4 as uuidv4 } from "uuid";
export default {
  name: "GroupChat",
  directives: {
    resize,
  },
  props: {
    nowInGroup: Object,
    newMsg: Object,
    recallUuid: String, //被撤回的消息的uuid
  },
    
  computed: {
    userId() {
      return this.$store.state.user.userId;
    },
    isSocketOpen() {
      this.time = this.getNowTime();
      this.initList();
      return this.$websocket.isSocketOpen;
    },
  },
  data() {
    return {
      index: "",
      isRecalled: false,
      recalledMessageIndex: [], // 初始化被撤回消息的索引为 -1
      event: "",
      //消息列表
      msgList: [],
      //进入页面的时间
      time: "",
      //分页工具
      materpagr: {
        page: 1, //当前页数
        page_size: 10, //每页展示几个
      },
      box: "",
      scTop: 0,
      loading: false, //加载层
      file: File,
      //自己写的文件列表
      imageUrl: "",
      fromId: "",
      cheks: false, //打开弹框
      joinlist: [], //查询群所有成员
      onePer: {}, //单个群成员
      //foot框的高度
      footHeight: 0,
      message: "",
      delailHouse: false,
      activeName: "first",
      //根据群id全查群信息
      GroupList: {},
      totalSize: 10,
    };
  },
  watch: {
    // 监听被撤回的消息id
    recallUuid(newVal) {
      if (newVal === "0") {
        return;
      }
      // 修改当前msgList
      const i = this.msgList.findIndex((v) => newVal === v.uuid);
      // 系统发送的
      this.msgList[i].isWithdraw = true;
    },
    footHeight(newHeight) {
      // console.log(`元素的新高度是：${newHeight}`);
    },
    nowInGroup(newVal) {
      if (this.isSocketOpen && newVal != null) {
        this.time = this.getNowTime();
        this.initList();
      }
    },
    // 监听滚轮
    scTop(newVal) {
      if (newVal == 0) {
        this.videoMore();
      }
    },

    //监听totalSize
    totalSize(newVal) {
      if (newVal < 10) {
        this.box.removeEventListener("scroll", this.scrollTop);
      }
    },
    //接收新的信息
    newMsg(newVal) {
      //转换类型
      newVal.msgType = this.$store.getters.getMsgTypeText(
        parseFloat(newVal.msgType)
      );
      if (newVal != null) {
        this.msgList.push(newVal);
        this.toBottom();
      }
    },
  },

  // 离开组件前需要移除监听事件，不然会引起blur of undefined的报错
  beforeDestroy() {
    window.removeEventListener("touchstart", this.selectConfirmBlur);
  },

  components: {
    GrounpIndex,
    joinGroup,
    linGroup,
  },
  methods: {
    //更新成员信息
    updateList() {
      this.join();
    },
    //子组件关闭弹窗
    close(data) {
      //关闭
      this.cheks = false;
    },
    //用户不在群的弹窗
    openMsg() {
      this.$message({
        showClose: true,
        message: "该成员已不在该群聊中",
        type: "error",
      });
    },
    //消息鼠标右键的菜单
    onContextmenu($event, message) {
      //菜单跟随鼠标的位置进行变化
      this.event = {
        clientX: event.clientX,
        clientY: event.clientY,
      };
      this.$contextmenu({
        items: [
          //撤回消息
          {
            label: "撤回消息",
            onClick: () => {
              const withdrawUserId = message.userType == 0 ? 0 : 1;
              //先发往服务器  参数
              let outMessage = {
                type: "recall", //群聊
                toId: this.nowInGroup.groupId, //发给谁呢
                fromId: this.userId,
                chatType: 2, //群聊
                userType: 0, //系统用户
                //添加uuid
                uuid: message.uuid, //获取随机id,
                withdrawUserId: 1, //管理员撤回
              };
              //传递到后端
              this.$websocket.ws.send(JSON.stringify(outMessage));
              //修改当前msgList
              const i = this.msgList.findIndex((v) => message.uuid === v.uuid);
              //系统发送的
              this.msgList[i].isWithdraw = true;
              //判断当前对象是我发送的还是app的人发送的
              this.msgList[i].withdrawUserId = withdrawUserId;
            },
          },
          //删除消息
          {
            label: "删除消息",
            onClick: () => {
              //先发往服务器  参数
              let outMessage = {
                type: "del", //群聊
                toId: this.nowInGroup.groupId, //发给谁呢
                fromId: this.userId,
                chatType: 2, //群聊
                userType: 0, //系统用户
                //添加uuid
                uuid: message.uuid, //获取随机id,
              };
              //传递到后端
              this.$websocket.ws.send(JSON.stringify(outMessage));
              //修改当前msgList
              const i = this.msgList.findIndex((v) => message.uuid === v.uuid);
              this.msgList.splice(i, 1);
            },
          },
        ],
        // 鼠标事件信息
        event: this.event,
        // 自定义菜单 class
        customClass: "custom-class",
        // 菜单样式 z-index
        zIndex: 3,
        // 主菜单最小宽度
        minWidth: 230,
      });
      return false;
    },
    scrollTop() {
      this.scTop = this.$refs.list.scrollTop;
    },
    //初始化列表
    initList() {
      //如果没有的话就不初始化了
      if (this.nowInGroup == null) {
        return;
      }
      // 通过$refs获取dom元素
      this.box = this.$refs.list;
      // 监听这个dom的scroll事件
      this.box.addEventListener("scroll", this.scrollTop);
      //获取当前群号
      let groupId = this.nowInGroup.groupId;
      //获取当前登录者
      let userId = this.userId;
      //查询当前页面聊天记录
      this.$axios
        .get("/groupMessage/getGroupChatSys", {
          params: {
            userId: userId,
            groupId: groupId,
            type: 0,
            pageNum: 1,
            pageSize: this.materpagr.page_size,
            time: this.time,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.msgList = res.data.data.content;
            this.totalSize = res.data.data.totalSize;
            this.toBottom();
            //每换一次群刷新一次群id
            this.join();
            this.GroupAllList();
            this.msgList.forEach((item) => {
              if (item.msgType == "other") {
                item.contents = JSON.parse(item.content);
              } else if (item.msgType == "link") {
                item.contents = JSON.parse(item.content);
              }
            });
          } else {
            this.$message.warning(res.data.code);
          }
        });
    },
    //点击成员头像
    ckues(fromId) {
      //获取当前发送人的id
      this.fromId = fromId;
      this.$axios
        .get("joinGroup/setlinkGroupId", {
          params: {
            groupId: this.nowInGroup.groupId,
            userId: this.fromId,
          },
        })
        .then((res) => {
          this.onePer = res.data.data;
          if (!this.onePer.status) {
            //打开不在群的弹窗
            this.openMsg();
          } else {
            this.cheks = true;
          }
        })
        .catch((err) => {});
    },
    //加载更多
    videoMore() {
      // 开启加载
      this.loading = true;
      //获取this.$refs.list.的高度
      let height = this.$refs.list.offsetHeight;
      // 通过数据总数判断页数
      if (
        this.materpagr.page - 1 >
        this.materpagr.cursor / this.materpagr.page_size
      ) {
        return false;
      } else {
      }
      //获取当groupId前群号
      let groupId = this.nowInGroup.groupId;
      //获取当前登录者
      let userId = this.$store.state.user.userId;
      this.materpagr.page++;
      this.$axios
        .get("/groupMessage/getGroupChatSys", {
          params: {
            userId: userId,
            groupId: groupId,
            type: 0,
            pageNum: this.materpagr.page,
            pageSize: this.materpagr.page_size,
            time: this.time,
          },
        })
        .then((res) => {
          // 关闭加载
          this.loading = false;
          let newData = res.data.data.content;
          let oldData = this.msgList;
          this.totalSize = res.data.data.totalSize;
          this.msgList = newData.concat(oldData); //此处注意是叠加进数组而不是替换
          this.$refs.list.scrollTop = height;
        });
    },
    //根据群groupId获取群信息
    GroupAllList() {
      this.$axios
        .get("/group/queryGroupAll", {
          params: {
            groupId: this.nowInGroup.groupId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.GroupList = res.data.data[0];
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG & !isPNG) {
        this.$message.error("上传头像图片只能是 JPG / PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      this.imageUrl = URL.createObjectURL(file);
      this.file = file;
      return false;
    },
    //上传图片
    submitUpload() {
      if (this.imageUrl == "" || this.file == null) {
        this.$message.error("请选择图片！");
        return;
      }
      //先上传 $uploadUrl
      const formData = new FormData();
      if (this.file) {
        formData.set("file", this.file, this.file.name);
      }
      this.$axios
        .post(this.$uploadUrl, formData)
        .then((res) => {
          if (res.data.flag) {
            let url = this.$imageUrl + res.data.data;
            // 获取
            let createTime = dateUtil.getTimeNow(); //获取现在时间
            //后端 存储的是数字  前端 显示的单词
            let msgType = this.$store.getters.getMsgType("image");
            //先发往服务器  参数
            const uuid = this.userId + uuidv4();
            let outMessage = {
              type: "group_message", //群聊
              toId: this.nowInGroup.groupId, //发给谁呢
              msgType: msgType, //消息类型
              createTime: createTime, //创建时间
              content: url,
              unchecked: 1, //未读消息+1
              chatType: 2, //群聊
              fromType: 0, //系统用户
              //添加uuid
              uuid: uuid, //获取随机id,
              fromId: this.userId,
              fromImgId: this.$store.state.user.imageId,
              fromName: this.$store.state.user.loginName,
              isWithdraw: false, //默认未撤回
              withdrawUserId: null, //默认主动撤回
            };
            //发送到页面
            let message = {
              fromType: 0, //系统用户
              fromImgId: this.$store.state.user.imageId,
              fromName: this.$store.state.user.loginName,
              content: url,
              msgType: "image",
              createTime: createTime,
              fromId: this.userId,
              toId: this.nowInGroup.groupId,
              //添加uuid
              uuid: uuid, //获取随机id,
              isWithdraw: false, //默认未撤回
              withdrawUserId: null, //默认主动撤回
            };
            //添加到聊天列表中
            this.msgList.push(message);
            this.$refs.textarea.innerText = "";
            //判断图片选择器之类的是否开着
            if (this.imageUrl != "") {
              this.imageUrl = "";
            }
            this.$websocket.ws.send(JSON.stringify(outMessage));
            //下滑
            this.toBottom();
          } else {
            this.$message("warning", res.data.code);
          }
        })
        .catch((err) => {
          this.$message("warning", "对不起，保存失败，请您稍后再试！"); // 添加或修改失败
        });
    },
    //发送消息
    sendAnswer() {
      //判断是否为0
      if (this.message.length == 0) {
        this.$message.warning("不能输入空白消息");

        return;
      } //判断图片选择器之类的是否开着
      if (this.imageUrl != "") {
        this.imageUrl = "";
      }
      // 获取
      let createTime = dateUtil.getTimeNow(); //获取现在时间
      //后端 存储的是数字  前端 显示的单词
      let msgType = this.$store.getters.getMsgType("text");
      //先发往服务器  参数
      let uuid = this.userId + uuidv4(); //获取随机id,
      let outMessage = {
        type: "group_message", //群聊
        toId: this.nowInGroup.groupId, //发给谁呢
        fromId: this.userId,
        fromImgId: this.$store.state.user.imageId,
        fromName: this.$store.state.user.loginName,
        msgType: msgType, //消息类型
        createTime: createTime, //创建时间
        content: this.message,
        unchecked: 1, //未读消息+1
        chatType: 2, //群聊
        fromType: 0, //系统用户
        //添加uuid
        uuid: uuid, //获取随机id,
        isWithdraw: false, //默认未撤回
        withdrawUserId: null, //默认主动撤回
      };
      //发送到页面
      let message = {
        fromType: 0, //系统用户
        content: this.message,
        msgType: "text",
        createTime: createTime,
        fromId: this.userId,
        fromImgId: this.$store.state.user.imageId,
        fromName: this.$store.state.user.loginName,
        toId: this.nowInGroup.groupId,
        isWithdraw: false, //默认未撤回
        withdrawUserId: null, //默认主动撤回
        //添加uuid
        uuid: uuid, //获取随机id,
      };
      //添加到聊天列表中
      this.msgList.push(message);
      this.$refs.textarea.innerText = "";
      this.message = "";
      this.$websocket.ws.send(JSON.stringify(outMessage));
      //下滑
      this.toBottom();
    },
    //滑动到底部
    toBottom() {
      setTimeout(() => {
        let div = document.getElementById("list");
        if (div) {
          div.scrollTop = div.scrollHeight;
        }
      }, 200);
    },

    //查询全部群成员
    join() {
      this.$axios
        .get("joinGroup/setByGroupId", {
          params: {
            groupId: this.nowInGroup.groupId,
          },
        })
        .then((res) => {
          this.joinlist = res.data.data;
        })
        .catch((err) => {});
    },
    // 当触摸或点击位置不是输入框时，取消输入框焦点
    selectConfirmBlur(event) {
      if (event.target.id != "textarea") {
        this.$nextTick(() => {
          this.$refs.textarea.blur();
        });

        // 如果是点击的发送，那么不仅取消焦点，还应该触发发送按钮
        if (event.target.parentNode.id == "send-answer") {
          this.sendAnswer();
        }
      }
    },
    // 监听输入框内容的实时变化，然后及时赋值给对应的变量
    changeAnswerContent(event) {
      let textareaContent = event.target.innerText.trim();

      if (textareaContent.length > 100) {
        this.$message.warning("最多允许输入100个字符哦");
        textareaContent = textareaContent.slice(0, 101);
        // 截取前200个赋值给当前文本框
        this.$refs.textarea.innerText = textareaContent;
        // 将光标重新定位到内容最后
        this.$nextTick(() => {
          this.keepCursorEnd(event.target);
        });
        return;
      } else if (textareaContent.length == 0) {
        this.$message.warning("不能输入空白消息");
        // 清空
        this.$refs.textarea.innerText = "";
        // 将光标重新定位到内容最后
        this.$nextTick(() => {
          this.keepCursorEnd(event.target);
        });
        return;
      }
      // 拿到用户输入的值
      this.message = textareaContent;
    },

    // 将光标重新定位到内容最后
    keepCursorEnd(obj) {
      // ie11 10 9 firefox safari
      if (window.getSelection) {
        // 解决firefox不获取焦点无法定位问题
        obj.focus();

        // 创建range
        let range = window.getSelection();

        // range 选择obj下所有子内容
        range.selectAllChildren(obj);

        // 光标移至最后
        range.collapseToEnd();
      } else if (document.selection) {
        //ie10 9 8 7 6 5
        // 创建选择对象
        let range = document.selection.createRange();

        //range定位到obj
        range.moveToElementText(obj);

        //光标移至最后
        range.collapse(false);
        range.select();
      }
    },
    // 输入框失去焦点时触发
    addDefaultContent(event) {
      // 拿到当前内容
      let textareaContent = event.target.innerText.trim();
      // 没有输入内容或者输入了很多空格后失去焦点，则显示默认内容
      if (textareaContent.length == 0) {
        // 若全部输入的空格，则先清空
        this.$refs.textarea.innerText = "";
      }
    },
    // 监听粘贴内容到输入框事件，对内容进行处理
    optimizePasteEvent(e) {
      e.stopPropagation();
      e.preventDefault();
      let text = "",
        event = e.originalEvent || e;
      if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData("text/plain");
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData("text");
      }

      if (document.queryCommandSupported("insertText")) {
        document.execCommand("insertText", false, text);
      } else {
        document.execCommand("paste", false, text);
      }
    },
    // 该元素高度变化时改变msgList高度
    resetTableHeight() {
      if (document.getElementsByClassName("text")[0]) {
        this.footHeight =
          document.getElementsByClassName("text")[0].clientHeight;
        document.getElementsByClassName(
          "msgList"
        )[0].style.height = `calc(100% - ${this.footHeight + 40}px)`;
      }
    },

    // 放大图片
    showImagePreview(imageSrc) {
      const image = new Image();
      image.src = imageSrc;
      image.onload = () => {
        // 创建弹出层
        const previewContainer = document.createElement("div");
        previewContainer.style.position = "fixed";
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
        previewContainer.style.display = "flex";
        previewContainer.style.justifyContent = "center";
        previewContainer.style.alignItems = "center";
        previewContainer.style.zIndex = 1000;
        document.body.appendChild(previewContainer);
        // 在弹出层中添加图片
        const previewImage = document.createElement("img");
        previewImage.src = imageSrc;
        previewImage.style.maxWidth = "80%";
        previewImage.style.maxHeight = "80%";
        previewContainer.appendChild(previewImage);
        // 点击弹出层，关闭预览
        previewContainer.addEventListener("click", () => {
          document.body.removeChild(previewContainer);
        });
      };
    },
    //计算俩个时间相差的秒数
    btwnSeconds(time1, time2) {
      return dateUtil.TimeDifferenceSeconds(time1, time2);
    },
    //计算俩个时间相差的天数
    btwnDays(time1, time2) {
      return dateUtil.TimeDifference(time1, time2);
    },
    //获取现在时间
    getNowTime() {
      return dateUtil.getTimeNow();
    },
    handleClick(tab, event) {},
  },
};
</script>

<style scoped>
/* 文章转发 其他类型 */

.host_body {
  width: 170px;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
  break-inside: avoid;
  /*避免在元素内部插入分页符*/
  box-sizing: border-box;
  margin-bottom: 20rpx;
  box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}

.yui {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}
/*==================================================*/
.groupHeader {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-weight: 700;
  font-size: 22px;
  border-bottom: 2px solid #efefef;
}
.msgList {
  overflow: auto;
  height: calc(100% - 40px);
  transition: scrollTop 5s ease;
}
.msgList > li {
  display: block;
  width: calc(100% - 40px);
  padding: 10px 20px;
  margin-bottom: 10px;
  overflow: hidden;
}

.msg-right > div {
  float: right;
}
.msg-left > div {
  float: left;
}

.WhereDid {
}

.msgTime {
  text-align: center;
  font-size: 14px;
  color: rgba(39, 40, 50, 0.3);
  line-height: 17px;
  padding: 5px 0px;
}
.message {
  display: inline-block;
  max-width: 200px;
  position: relative;
}
.msg-left .message {
  margin-left: 20px;
}
.msg-right .message {
  margin-right: 20px;
}

.msg-text {
  font-size: 16px;
  color: rgba(39, 40, 50, 1);
  line-height: 32px;
  padding: 9px 12px;
}
.msg-right .msg-text {
  background-color: #2cd3b4;
  border-radius: 20px 0px 20px 20px;
}
.msg-left .msg-text {
  background-color: rgb(235, 235, 235);
  border-radius: 0px 20px 20px 20px;
}
.fromName {
  height: 26px;
  color: rgba(39, 40, 50, 0.3);
}
.msg-right .fromName {
  text-align: right;
}
.msg-img {
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
.text {
  position: relative;
  width: calc(100% - 80px);
  margin: 0 auto;
  padding: 8px 20px 0 20px;
  min-height: 40px;
  z-index: 3;
  background: #2cd3b4;
  box-shadow: 1px 2px 8px rgb(214, 214, 214);
  border-radius: 20px;
}
.upload {
  display: inline-block;
  vertical-align: top;
}
.sendImg {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  color: #2cd3b4;
  font-weight: 700;
  vertical-align: top;
}
.sendMsg {
  outline: none;
  border: none;
  min-height: 32px;
  font-size: 16px;
  line-height: 32px;
  width: calc(100% - 110px);
  margin-left: 20px;
  display: inline-block;
  overflow-y: visible;
}
.send {
  display: inline-block;
  width: 60px;
  background: #fff;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30px;
  vertical-align: top;
}
.msg-withdraw {
  text-align: center;
  font-size: 24rpx;
  height: 80rpx;
  line-height: 60rpx;
  color: gray;
}

.imgshow {
  position: absolute;
  top: -180px;
  background: #fcfcfc;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 10px 20px;
}
.recalls {
  text-align: center;
}

.cardming {
  width: 240px;
  height: 120px;
  /* background-color: rebeccapurple; */
  border-radius: 10px;
  background: rgb(246, 246, 246);
  box-sizing: border-box;
}

.mingbox {
  width: 100%;
  height: 90px;
  padding: 20px;
  box-sizing: border-box;
  /* background-color: red; */
  border-bottom: 1px solid black;
}

.imageleft {
  float: left;
  width: 50px;
  height: 50px;
}

.textright {
  /* width: 100%; */
  height: 50px;
  line-height: 50px;
  float: left;
  margin-left: 30px;
}

.msg-img {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}
</style>